<template>
	<view>
		<view class="wrapper">
			<u-list @scrolltolower="handleLoadMore">
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="order-item">
						<view class="order-item_hd">
							<view class="order-datetime">{{ item.payTime | formatDate }}</view>
							<view class="order-status">{{ item | formatOrderStatus }}</view>
						</view>
						<view class="order-item_bd">
							<view class="order-info">
								<view class="order-label">订单编号</view>
								<view class="order-value">{{ item.orderNo }}</view>
							</view>
							<view class="order-info">
								<view class="order-label">活动名称</view>
								<view class="order-value">{{ item.product.productName }}</view>
							</view>
							<view class="order-info">
								<view class="order-label">报名人</view>
								<view class="order-value">{{ item.nickName }}</view>
							</view>
							<view class="order-info">
								<view class="order-label">手机号</view>
								<view class="order-value">{{ item.phonenumber }}</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import {
		getCampOrderList
	} from '@/api/admin.js';
	import {
		dateFormat
	} from '@/utils/util.js';
	import {
		formatOrderStatus
	} from '@/libs/order.js';

	export default {
		filters: {
			formatDate(date) {
				return dateFormat('YYYY/mm/dd HH:MM', new Date(date))
			},
			formatOrderStatus(order) {
				return formatOrderStatus(order)
			},
		},
		data() {
			return {
				// 页面传参
				options: {},
				// 查询参数
				listParams: {
					pageNum: 0,
					pageSize: 10,
				},
				// 活动
				list: [],
				// 列表滚动高度
				listWrapperH: 0,
				// 是否没有更多了
				isNoMore: false,
			};
		},
		onLoad(options) {
			let that = this
			that.options = options
		},
		onShow() {
			this._getList(true)
		},
		methods: {
			// 获取收藏列表
			_getList(refresh) {
				let that = this
				if (refresh) {
					that.listParams.pageNum = 1
					that.list = []
					that.isNoMore = false
				} else if (that.isNoMore) {
					that.$util.showToast('没有更多了')
					return
				}
				uni.showLoading()
				getCampOrderList(that.listParams).then(res => {
					that.list = that.list.concat(res.rows)
					if (res.rows.length == that.listParams.pageSize) {
						that.listParams.pageNum++
					} else {
						that.isNoMore = true
					}
				}).finally(res => {
					uni.hideLoading()
				})
			},

			// 加载更多
			handleLoadMore() {
				this._getList()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.order-item {
		font-size: 28rpx;
		line-height: 48rpx;
		background-color: #fff;
		margin-bottom: 24rpx;

		&_hd {
			display: flex;
			border-bottom: 1rpx solid #ddd;
			padding: 24rpx 32rpx;

			.order-datetime {
				flex: 1;
			}

			.order-status {
				font-weight: bold;
			}
		}

		&_bd {
			padding: 24rpx 32rpx;

			.order-info {
				display: flex;

				.order-label {
					min-width: 140rpx;
					color: #999;
				}

				.order-value {
					flex: 1;
					text-align: right;
				}
			}

			&+.order-info {
				margin-top: 16rpx;
			}
		}
	}
</style>
